<script setup lang="ts">
import { ref, onMounted, reactive, computed } from "vue"
import videoDetail from "./components/videoDetail.vue"
defineOptions({
    name: "Monitoring"
});
const videoDetailRef = ref(null)
const videoList = reactive([
    { id: 1, name: '监控点 1' },
    { id: 2, name: '监控点 2' },
    { id: 3, name: '监控点 3' },
    { id: 4, name: '监控点 4' },
    { id: 5, name: '监控点 5' },
    { id: 6, name: '监控点 6' },
    { id: 7, name: '监控点 7' }
])
const pageCurrent = ref(4)  // 默认四宫格
const pagination = reactive({
    pageSize: 20,
    currentPage: 1,
    pageSizes: [20, 40, 60],
    total: 0,
    align: "right",
    background: true,
    size: "default"
});

// 计算每行显示的数量
const itemsPerRow = computed(() => {
    switch (pageCurrent.value) {
        case 4: return 2;  // 四宫格：2x2
        case 9: return 3;  // 九宫格：3x3
        case 16: return 4; // 十六宫格：4x4
        default: return 2;
    }
})

// 计算每个监控项的宽度百分比
const itemWidth = computed(() => {
    // 减去间距的百分比，确保不会溢出
    return `${100 / itemsPerRow.value - 1}%`;
})
const itemHeight = computed(() => {
    const num = itemsPerRow.value
    if (num == 2) {
        return `49%`;
    }
    if (num == 3) {
        return ` 32%`;
    }
    if (num == 4) {
        return `24%`;
    }
})
const treeData = reactive([
    {
        label: 'Level one 1',
        children: [
            {
                label: 'Level two 1-1',
                children: [
                    {
                        label: 'Level three 1-1-1',
                    },
                ],
            },
        ],
    },
    {
        label: 'Level one 2',
        children: [
            {
                label: 'Level two 2-1',
                children: [
                    {
                        label: 'Level three 2-1-1',
                    },
                ],
            },
            {
                label: 'Level two 2-2',
                children: [
                    {
                        label: 'Level three 2-2-1',
                    },
                ],
            },
        ],
    },
    {
        label: 'Level one 3',
        children: [
            {
                label: 'Level two 3-1',
                children: [
                    {
                        label: 'Level three 3-1-1',
                    },
                ],
            },
            {
                label: 'Level two 3-2',
                children: [
                    {
                        label: 'Level three 3-2-1',
                    },
                ],
            },
        ],
    },
])
const currentPageVideos = computed(() => {
    const startIndex = (pagination.currentPage - 1) * pagination.pageSize;
    const endIndex = startIndex + pagination.pageSize;
    return videoList.slice(startIndex, endIndex);
})
const defaultProps = {
    children: 'children',
    label: 'label',
}
const nodeClick = node => {
    console.log(node)
}
const addNode = node => {
    console.log(node)
}
const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
}
// 切换宫格
const handleChange = (e: number) => {
    pageCurrent.value = e;
}
// 查看详情
const handleOpen = item => {
    videoDetailRef?.value.handleOpen(item)
}
</script>

<template>
    <div>
        <basic-layout :treeData="treeData" :defaultProps="defaultProps" @nodeClick="nodeClick"
            placeholderTree="请输入设备位置搜索">
            <!-- 表格 -->
            <template #tableContent>
                <div class="basic-layout-right-search" style="padding: 0;">
                    <div class="search-left">
                        <el-button @click="handleChange(4)" :type="pageCurrent === 4 ? 'primary' : ''" plain>
                            <i class="platformfont icon-sigongge"></i> 四宫格
                        </el-button>
                        <el-button @click="handleChange(9)" :type="pageCurrent === 9 ? 'primary' : ''" plain>
                            <i class="platformfont icon-liugongge"></i> 九宫格
                        </el-button>
                        <el-button @click="handleChange(16)" :type="pageCurrent === 16 ? 'primary' : ''" plain>
                            <i class="platformfont icon-shiliugongge"></i> 十六宫格
                        </el-button>
                    </div>
                    <div class="search-right">
                        <el-pagination v-model:current-page="pagination.currentPage"
                            v-model:page-size="pagination.pageSize" :page-sizes="[20, 40, 60]" :size="pagination.size"
                            :background="true" layout="total, sizes, prev, pager, next, jumper" :total="30"
                            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                    </div>
                </div>
                <div class="basic-bottom">
                    <div class="monitoring">
                        <div class="monitoring-list" v-for="item in currentPageVideos" :key="item.id"
                            :style="{ width: itemWidth, height: itemHeight }">
                            <!-- <div class="monitoring-name">{{ item.name }}</div> -->
                            <div class="monitoring-placeholder" @click="handleOpen(item)">
                                <!-- 这里可以放置视频播放组件 -->
                                <i class="el-icon-video-camera"></i>
                            </div>
                            <div class="monitoring-time">
                                <div>东区入口</div>
                                <span>2025/01/01 星期一 08:00:00</span>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
        </basic-layout>
        <video-detail ref="videoDetailRef"></video-detail>
    </div>
</template>
<style lang="scss" scoped>
.search-left {
    .el-button {
        width: 112px;
        margin-right: 10px;
    }

    i {
        margin-right: 5px;
        font-size: 14px;
    }
}

.basic-bottom {
    overflow: auto;
    height: 82vh;
}

.monitoring {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 15px;
    height: 100%;

    &-list {
        background: #EBEFF5;
        border: 1px solid #C0CFF2;
        border-radius: 4px;
        overflow: hidden;
        transition: all 0.3s ease;
        cursor: pointer;
        position: relative;

        &:hover {
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            border-color: var(--el-color-primary);
        }
    }

    &-name {
        padding: 8px 12px;
        background: #F5F7FA;
        border-bottom: 1px solid #C0CFF2;
        font-size: 14px;
        color: #303133;
    }

    &-placeholder {
        height: calc(100% - 36px);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #909399;

        i {
            font-size: 32px;
        }
    }

    &-time {
        position: absolute;
        left: 0;
        bottom: 0;
        padding: 10px;
        color: #fff;

        div {
            font-weight: bold;
            font-size: 14px
        }

        span {
            font-size: 12px;
        }

    }
}

// 响应式调整
@media (max-width: 1200px) {
    .monitoring {
        gap: 10px;
    }
}
</style>
